<!DOCTYPE html>
<html lang="en">

<head>
  <title>Magic Menu Indicator</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navigation">
    <ul>
      <li class="list active">
        <a href="#">
          <span class="icon">
            <ion-icon name="home-outline"></ion-icon>
          </span>
          <span class="text">Home</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="person-outline"></ion-icon>
          </span>
          <span class="text">Profile</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="chatbubble-outline"></ion-icon>
          </span>
          <span class="text">Message</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="camera-outline"></ion-icon>
          </span>
          <span class="text">Photos</span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon">
            <ion-icon name="settings-outline"></ion-icon>
          </span>
          <span class="text">Settings</span>
        </a>
      </li>
      <div class="indicator"></div>
    </ul>
  </div>

  <script>
    const list = document.querySelectorAll('.list')
    function activeLink() {
      list.forEach(item => {
        item.classList.remove('active')
        this.classList.add('active')
      })
    }
    list.forEach(item => {
      item.addEventListener('click', activeLink)
    })
  </script>

  <!-- 要使用别人提供的 icon 图标，所以引入两个 js 文件 -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>

</html>